<template>
  <div class="change_admin staffManage">
    <el-dialog
      :title="title"
      class="gl_dialog_TitleLine"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="880px"
    >
      <el-form ref="form" class="gl_form_mini" :model="formData" label-width="120px" label-position="right" style="padding-right: 30px;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="商品名称" prop="commodityName">
                  <el-input v-model="formData.commodityName" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="分馆" prop="clubName">
                  <el-input v-model="formData.clubName" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="描述" prop="description">
                  <el-input v-model="formData.description" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="添加时间" prop="addTime">
                  <el-input v-model="formData.addTime" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="添加数量" prop="stock">
                  <el-input v-model="formData.stock" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="24">
                <el-form-item label="上传图片" prop="commodityImg">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="formData.commodityImg" :src="formData.commodityImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close()">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" size="mini" @click="saveNew('form')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'Account',
  data() {
    return {
      formData: {
        commodityImg: '',
        commodityName: '',
        clubName: '',
        description: '',
        stock: '',
        addTime: ''
      },

      title: '',
      dialogVisible: false
    };
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    open(row) {
      if (row === 'add') {
        this.title = '新增';
      } else {
        this.title = '编辑';
        this.formData = JSON.parse(JSON.stringify(row));
      }
      this.dialogVisible = true;
      console.log(row);
    },
    close() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    // 点击确定添加
    saveNew(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            const StudentCardData = this.formData;
            this.$emit('pushTabelData', JSON.parse(JSON.stringify(StudentCardData)));
            console.log(this.formData);
          } else {
            console.log(this.formData);
          }
        } else {
          return false;
        }
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      console.log('file');
      console.log(file);
      this.formData.commodityImg = JSON.parse(JSON.stringify(URL.createObjectURL(file.raw)));
    }
  }
};
</script>

<style>
.staffManage .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.staffManage .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.staffManage .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.staffManage .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
